<template>
	<view class="addr-user">
		<view class="addr-user-search">
			<view class="search">
				<icon type="search" size="14"></icon>
				<input type="text" v-model="key" placeholder="搜索" />
			</view>
		</view>
		<view class="addr-user-list">
			<view class="addr-user-list-title">
				{{selectedUser.Name}}<text>({{fltItems.length}})</text>
			</view>
			<view class="addr-user-list-item" v-for="(item,index) in fltItems" 
				  :key="index"  @click="onNav(item.ID)">
				<view class="rect">{{_retSlgName(item.UserName)}}</view>
				<view class="item-name">
					{{item.UserName}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				items: [],
				key: "",
				selectedUser: JSON.parse(uni.getStorageSync("selectedUser"))
			}
		},
		onLoad: function(options) {
			this.getAddrUser(this.selectedUser.ID);
		},
		computed: {
			fltItems() {
				var _key = this.key;
				if (_key) {
					//不区分大小写处理
					var reg = new RegExp(_key, 'ig')
					return this.items.filter(item => {
						return item.UserName.match(reg)
					})
				};
				return this.items;

			},
		},
		methods: {
			onNav(ID){
				uni.navigateTo({
					url:"./UserInfo?id="+ID
				})
			},
			_retSlgName(v) {
				return (v) ? v.substr(0, 1) : "";
			},
			getAddrUser(OrgID) {
				let apiData = {
					url: pageApp.globalData.url + "/UserList",
					data: {
						"OrgID": OrgID,
						"page": 1,
						"rows": 20
					},
					success: (d) => {
						// console.log("数据", d);
						this.items = d.data.data.items;
					}
				}
				// 发送数据
				this.vjAjaxData(apiData);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.search {
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.search icon {
		position: absolute;
		left: 52rpx;
		top: 50%;
		margin-top: -20rpx;
	}

	.search input {
		background-color: #F1F5F6;
		padding: 16rpx 30rpx 16rpx 65rpx;
		border-radius: 60rpx;
	}

	.addr-user-list {
		margin: 20rpx 0 80rpx 0;
		padding: 30rpx 0;
		background-color: #ffffff;
	}

	.addr-user-list-title {
		padding: 20rpx 0;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
		border-bottom: solid 2rpx #EBEBEB;
	}

	.addr-user-list-title text {
		margin-left: 10rpx;
	}

	.addr-user-list-item {
		display: flex;
		padding: 10rpx 30rpx;
		margin-left: 130rpx;
		border-bottom: solid 2rpx #EBEBEB;
	}

	.addr-user-list-item:last-child {
		border-bottom: none;
	}

	.addr-user-list-item .rect {
		background-color: #4497e1;
		border-radius: 16rpx;
		color: #ffffff;
		margin-left: -130rpx;
		text-align: center;
		width: 80rpx;
		height: 80rpx;
		font-size: 36rpx;
		line-height: 80rpx;
	}

	.addr-user-list-item .item-name {
		margin: 20rpx;
	}
</style>
